//引入相关依赖
const webpack = require('webpack')
const path=require('path')
//引入html-webpack-plugin
const HtmlWebpackPluin = require('html-webpack-plugin')
//引入vue-loader插件
const {VueLoaderPlugin} =require('vue-loader')
//引入css抽离插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//创建一个webpak配置对象
const config = {
    //设置模式
    mode:'production',
    //配置入口
    entry:'./src/main.js',
   
    //配置出口
    output: {
       //打包路径
      path:path.resolve(__dirname,'dist'),
       //打包文件名 
        filename: 'js/bundle.js',
         //静态资源输出目录
    assetModuleFilename:'imgs/[name][hash][ext]',
      //清理无用文件
        clean:true
        
    },
    //配置loader
    module:{
          rules:[
            //解析css
            { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
              //解析sass
              { test: /\.s[ac]ss/i, use: ['style-loader', 'css-loader', 'sass-loader'] },
              //解析图片，字体图标,svg
              { test: /\.(jpg|jpeg|png|svg|gif)$/i, type: 'asset/resource' },
              //配置vue-loader
              {test:/\.vue$/i,use:['vue-loader']}
          ],
    },
    //解决缺省扩展名问题
    resolve: {
        extensions:['.js','.vue']
    },
    //配置webpack服务器
    devServer:{
      port:9999,
    // //静态目录位置
    // static:{
    //        directory:'dist'
    // }
    },
     //配置插件
     plugins: [
        // new MiniCssExtractPlugin({
        //     filename:'css/project.css'
        // }),
        new HtmlWebpackPluin({
            //是否压缩
            minify:false,
            //从哪个模板生成html
            template:'./public/index.html',
            //生成后的html文件名
            filename:'index.html'
        }),
         //vue-loader插件
         new VueLoaderPlugin()
    ],
}


//抛出对象
module.exports=config